<script setup>
import { ref } from 'vue'
import MyIcon from '@/components/my-icon/index.vue'
import { formatDate } from '@/utils'
import {reqClientDynamics} from '@/api'
import { customerDataList,customerConstanDynamic } from '@/data'
const event_list = ref([
	{
		add_by_staff_ext_id: 'wogizUDQAAKiNTdJI0Tvy5szAR6FEIJA',
		add_by_staff_id: 19428612,
		add_by_staff_name: '代树兴',
		content: '管理员 *staff*修改地址为:',
		corp_id: '1747535423434273793',
		created_at: 1667118475,
		event_title: null,
		event_type: 'update_remark',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5743493206,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	},
	{
		add_by_staff_ext_id: 'wogizUDQAAKiNTdJI0Tvy5szAR6FEIJA',
		add_by_staff_id: 19428612,
		add_by_staff_name: '代树兴',
		content: '管理员 *staff*添加地址为:122',
		corp_id: '1747535423434273793',
		created_at: 1667117070,
		event_title: null,
		event_type: 'update_remark',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5743224731,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	},
	{
		add_by_staff_ext_id: 'wogizUDQAAKiNTdJI0Tvy5szAR6FEIJA',
		add_by_staff_id: 19428612,
		add_by_staff_name: '代树兴',
		content: '管理员 *staff*修改职位为:',
		corp_id: '1747535423434273793',
		created_at: 1666945791,
		event_title: null,
		event_type: 'update_remark',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5722747788,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	},
	{
		add_by_staff_ext_id: 'wogizUDQAAKiNTdJI0Tvy5szAR6FEIJA',
		add_by_staff_id: 19428612,
		add_by_staff_name: '代树兴',
		content: '管理员 *staff*添加职位为:333',
		corp_id: '1747535423434273793',
		created_at: 1666945786,
		event_title: null,
		event_type: 'update_remark',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5722776348,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	},
	{
		add_by_staff_ext_id: 'wogizUDQAAKiNTdJI0Tvy5szAR6FEIJA',
		add_by_staff_id: 19428612,
		add_by_staff_name: '代树兴',
		content: '管理员 *staff*添加生日为:2022-10-28',
		corp_id: '1747535423434273793',
		created_at: 1666945777,
		event_title: null,
		event_type: 'update_remark',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5722831965,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	},
	{
		add_by_staff_ext_id: null,
		add_by_staff_id: null,
		add_by_staff_name: null,
		content:
			'*avatar:http://wx.qlogo.cn/mmhead/UsichrXlnR9JTWYRlIyh8KQLTPiavw1TspZFE6iaRf7ZMtg6SWD4Hic1Cw/0;name:2021*添加了*staff*为好友',
		corp_id: '1747535423434273793',
		created_at: 1666748639,
		event_title: null,
		event_type: 'add_contact',
		external_user_ext_id: 'wmgizUDQAAJctJAQ3xgF7TXcCji6RrSw',
		id: 5692980757,
		is_muli_outbound_call: false,
		relate_staff_avatar: 'https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png',
		relate_staff_ext_id: 'wogizUDQAAOn_Yu3HqqR2SaFqBFElIbA',
		relate_staff_name: '张磊',
		target_id: null,
		target_id_2: null
	}
])
const event_map = ref({
	all: '全部动态',
	customer_action: '客户动态',
	integral_record: '积分记录',
	manual_event: '自定义事件',
	moment_interaction: '朋友圈互动',
	reminder_event: '提醒事件',
	template_event: '模板事件',
	update_remark: '修改信息',
	work_order_event: '工单动态',
	add_contact: '添加员工好友',
	add_template_event: '已添加模板事件',
	external_user_outflow: '删除员工好友',
	file_open: '打开pdf',
	join_group: '加入群聊',
	moment_open: '打开增强朋友圈',
	quit_group: '退出群聊',
	voice_call_record: '通话记录'
})
const weekDay = ref({
	0: '星期天',
	1: '星期一',
	2: '星期二',
	3: '星期三',
	4: '星期四',
	5: '星期五'
})
const tableData = ref([])
const show = async(id) =>{
	console.log(id,'tryyyyyyyyyyyyyyyy')
	const r = await reqClientDynamics({external_userid:id})
	if (r){
		var act = []
    r.data.forEach(item=>{
      if (act[item.orders-1]==undefined){

        act[item.orders-1] = {
          date:item.times,
          timeList:[item]
        }
      }else{
        act[item.orders-1].timeList.push(item)
      }

    })
    tableData.value = act
	}
}
const events = ref('all')
const toWeek = (time) => {
	const day = new Date(time).getDay()
	return day
}
defineExpose({
	show
})
</script>
<template>
	<div class="customer-detail-statistic" style="overflow: hidden;">
		<div class="customer-detail-post" >
			<!-- <div class="select-input">
				<el-select style="height: 36px" v-model="events" class="m-2" placeholder="Select">
					<el-option v-for="(value, key) in event_map" :key="key" :label="value" :value="key" />
				</el-select>
			</div> -->
			<div class="group-post-data-warp" v-for="(item,index) in tableData" :key="index">
				<div class="date-title">
					<!-- {{ weekDay[toWeek(1667118475)] }} -->
					<!-- {{ formatDate(event_list[2].created_at, 'yyyy-MM-dd hh:mm:ss').split(' ')[0] }} -->
				{{item.date}}
				</div>
				<div class="post-data-list-wrap">
					<div class="post-data" v-for="(act,idx) in item.timeList" :key="idx">
						<div class="time-title">
							<el-icon class="icon-wrap"><Position /></el-icon>
							{{ act.time }}
						</div>
						<div class="event-content-wrap">
							<div style="display: flex; align-items: flex-end">
								<div style="max-width: 70%" class="event-content">
									<div class="title">{{customerConstanDynamic[(act.type)+1+''].name}}</div>
									<div class="show-wrap" style="max-height: 60px; overflow: hidden">
										<div class="follow-event">
											<div class="info">
												<!-- 管理员 -->
												<img
													src="https://mpa.oss-cn-hangzhou.aliyuncs.com/weiban-prod/default-avatar.png"
													class="avatar"
												/><span style="font-weight: bold" class="name">{{act.staff_name}}</span>{{act.content}}
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<style lang="scss" scoped>
.customer-detail-statistic {
	width: 100%;
	// height: 392px;
	.customer-detail-post {
		padding: 16px 0 16px 24px;
		.select-input {
			width: 100%;
			margin-bottom: 20px;
		}
		.group-post-data-warp {
			.date-title {
				color: rgba(0, 0, 0, 0.85);
				font-size: 13px;
				font-weight: 700;
			}
			.post-data-list-wrap {
				margin-top: 12px;
				.post-data {
					.time-title {
						display: flex;
						align-items: center;
						color: #aeb4bf;
						font-size: 13px;
						.icon-wrap {
							font-size: 15px;
							margin-right: 12px;
						}
					}
					.event-content-wrap {
						display: flex;
						flex-direction: column;
						margin-left: 7px;
						border-left: 1px dashed #b4b9c3;
						padding-left: 20px;
						padding-bottom: 14px;
						.event-content {
							max-width: 70%;
							margin-right: 14px;
							margin-top: 8px;
							padding: 16px 20px;
							border: 1px solid #d0e8ff;
							border-radius: 2px;
							background: #f6fbfe;
							.show-wrap {
								.info {
									display: -webkit-box;
									display: flex;
									-webkit-box-pack: start;
									justify-content: flex-start;
									-webkit-box-align: center;
									align-items: center;
									flex-wrap: wrap;
									color: #3b4c66;
									word-break: break-all;
									font-size: 13px;
									white-space: pre-line;
									line-height: 30px;
									.avatar {
										vertical-align: bottom;
										width: 20px;
										height: 20px;
										margin: 0 8px;
										border-radius: 2px;
									}
									.name {
										margin-right: 8px;
									}
								}
							}
							.title {
								font-size: 14px;
								color: rgba(0, 0, 0, 0.9);
								font-weight: 700;
								margin-bottom: 8px;
							}
						}
					}
				}
			}
		}
	}
}
.table-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
}
</style>
